<template>
  <div>
    <el-carousel height="580px" motion-blur direction="vertical">
      <el-carousel-item>
        <img src="../assets/lunbo4.jpg" alt="" style="width: 100%" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/lunbo2.jpg" alt="" style="width: 100%" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/lunbo3.jpg" alt="" style="width: 100%" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/lunbo1.jpg" alt="" style="width: 100%" />
      </el-carousel-item>
    </el-carousel>

    <div class="video-container">
  <video muted autoplay loop controls class="video">
    <source src="../assets/shipin.mp4" type="video/mp4" />
    您的浏览器不支持 HTML5 视频。
  </video>
</div>

    <!-- 签约选手 -->
    <div class="player-container">
      <Title name="签约选手" en="Signed contestant" />
      <el-row :gutter="20" justify="center" class="image-row">
        <PlayerCard v-for="player in players" :key="player.id" :player="player" />
      </el-row>
    </div>

   <!-- 插入两个图表 -->
<div style="display: flex; justify-content: space-around; margin: 40px auto;">
  <br>
  <div id="main" style="width: 600px; height: 400px;"></div>
  <div id="radarChart" style="width: 600px; height: 400px;"></div>
</div>

    <!-- 新品推荐 -->
    <div class="news-container">
      <Title name="新品推荐" en="New Arrivals" />
      <ProductList :products="racketList" categoryName="羽毛球拍" />
      <ProductList :products="shoesList" categoryName="羽毛球鞋" />
      <ProductList :products="lineList" categoryName="羽毛球线" />
    </div>
  </div>
</template>

<script setup>
import Title from "../components/Title.vue";
import PlayerCard from "../components/PlayerCard.vue";
import ProductList from "../components/ProductList.vue";
import { ref, onMounted } from "vue";
import * as echarts from 'echarts';

// 引入图片资源
import shaxili from '../assets/shaxili.jpg';
import lindan from '../assets/lindan.jpg';
import anxiying from '../assets/anxiying.jpg';

// 初始化数据
const racketList = ref([]);
const shoesList = ref([]);
const lineList = ref([]);

const players = [
  { id: 1, name: '莎西莉', country: '泰国', imageUrl: shaxili },
  { id: 2, name: '林丹', country: '中国', imageUrl: lindan },
  { id: 3, name: '安洗莹', country: '韩国', imageUrl: anxiying }
];

// 加载产品数据
onMounted(() => {
  // 模拟API请求延迟
  setTimeout(() => {
    import('../data/products.json').then((data) => {
      const allProducts = data.default;
      racketList.value = allProducts.filter(item => item.categoryId === 1);
      shoesList.value = allProducts.filter(item => item.categoryId === 2);
      lineList.value = allProducts.filter(item => item.categoryId === 3);
    });
  }, 300);

  // 初始化 ECharts 图表
  const chartDom = document.getElementById('main');
  if (chartDom) {
    const myChart = echarts.init(chartDom);

    const option = {
      title: {
  text: '球拍销量占比',
  left: 'center', // 👈 显式居中
  top: 0,
  textStyle: {
    fontSize: 20,
    fontWeight: 'bold'
  }
},
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '销量',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'ARCSABER 11 PRO' },
            { value: 735, name: 'NANOFLARE 800 PRO' },
            { value: 580, name: 'ASTROX 100zz' },
            { value: 484, name: 'ASTROX 88S PRO' },
            { value: 300, name: 'ASTROX 99' }
          ]
        }
      ]
    };

    option && myChart.setOption(option);
  }
  // 初始化第二个图表（雷达图）
  const radarChartDom = document.getElementById('radarChart');
  if (radarChartDom) {
    const radarChart = echarts.init(radarChartDom);

    const radarOption = {
      title: {
        text: '签约球员的实力图',
        subtext: '完全实况球员数据'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        x: 'center',
        data: ['林丹', '安洗莹','莎西莉']
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      polar: [
        {
          indicator: [
            { text: '进攻', max: 100 },
            { text: '防守', max: 100 },
            { text: '体能', max: 100 },
            { text: '速度', max: 100 },
            { text: '力量', max: 100 },
            { text: '技巧', max: 100 }
          ],
          radius: 130
        }
      ],
      series: [
        {
          name: '完全实况球员数据',
          type: 'radar',
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default'
              }
            }
          },
          data: [
            {
              value: [70, 70, 67, 68, 76, 67],
              name: '莎西莉'
            },
            {
              value: [97, 95, 99, 95,99, 95],
              name: '林丹'
            },
            {
              value: [80, 80, 78, 85, 67, 66],
              name: '安洗莹'
            },
          ]
        }
      ]
    };
     radarChart.setOption(radarOption);
  }
});
</script>

<style scoped>
.video-container {
  margin-top: 80px;
  text-align: center;
}

.video {
  width: 60%;
}

.news-container {
  width: 80%;
  margin: 0 auto;
}
</style>